<?php 
	require_once 'libs/required.php';
	if(empty($_SESSION['user']))
	{
		header('Location: login.php');
	}
?>
<!DOCTYPE html>
<html>
<head>
    <title>Wheel Of Fortune</title>
    <script src="scripts/jquery-1.9.1.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <link href="styles/bootstrap.css" rel="stylesheet" />
    <link href="styles/site.css" rel="stylesheet" />
    <link href="styles/img/favicon.ico" rel="shortcut icon" />
    <script type="text/javascript">
        $('.dropdown-toggle').dropdown();
    </script>
    
    <script src="scripts/wheel.js"></script>
	
<style>
</style>
<script>
    var userInfo = "<?php echo ($_SESSION['user']->user_id . '%%S%%' . session_id() . '%%S%%'. $_SESSION['user']->sz_Ticket);?>";
    var category;
    var sz_UserName = '<?php echo $_SESSION['user']->user_username?>';
    var sz_ActiveUser = '';
    var quiz;
	var pieChart;
    var letterMatrix;
    var selfSpin = false;
	var oOptionWheel= {
			'aDatas' : [
				            15, 15, 15, 15, 15, 15, 
				            15, 15, 15, 15, 15, 15, 
				            15, 15, 15, 15, 15, 15, 
				            15, 15, 15, 15, 15, 15
			            ],
			'aLabels' : [
				             "Bankrup", "500", "225", "425", "300", "175", 
				             "Buy a vowel", "125", "300", "200", "325", "100", 
				             "Lose a turn", "450", "300", "200", "375", "100",
				             "Free Spin", "150", "250", "350", "275", "50"
			             ],
			'aColors': [
				            ["#2c3e50", "#2c3e50"], ["#e74c3c", "#e74c3c"], ["#e67e22", "#e67e22"], ["#d35400", "#d35400"], ["#f39c12", "#f39c12"], ["#2ecc71", "#2ecc71"],
		                    ["#c0392b", "#c0392b"], ["#f39c12", "#f39c12"], ["#f1c40f", "#f1c40f"], ["#FFDAB9", "#FFDAB9"], ["#E6E6FA", "#E6E6FA"], ["#1abc9c", "#1abc9c"],
		                    ["#2c3e50", "#2c3e50"], ["#e74c3c", "#e74c3c"], ["#f1c40f", "#f1c40f"], ["#FFDAB9", "#FFDAB9"], ["#27ae60", "#27ae60"], ["#1abc9c", "#1abc9c"],
		                    ["#8e44ad", "#8e44ad"], ["#7f8c8d", "#7f8c8d"], ["#3498db", "#3498db"], ["#d35400", "#d35400"], ["#8e44ad", "#8e44ad"], ["#16a085", "#16a085"]
			            ],
			'aValues': [
							"Bankrup", "500", "225", "425", "300", "175", 
							"Buy a vowel", "125", "300", "200", "325", "100", 
							"Lose a turn", "450", "300", "200", "375", "100",
							"Free Spin", "150", "250", "350", "275", "50"
			            ]
	};
    // kick things off
    window.onload = createPieChart;

    function createPieChart() {

        //
        // create a PieChart.
        // 
        pieChart = new PieChart("piechart",
            {
                includeLabels: true,
                data: oOptionWheel.aDatas,
                labels: oOptionWheel.aLabels,
                colors: oOptionWheel.aColors
            }
        );
        pieChart.draw();
        disabledSpin();
        enbabledReady();
    }
    // rotation when press spin button
    var spinTime = 0;
	var startAngle = 0;
	var arc = Math.PI / 12;
	var spinTimeout = null;
	var spinArcStart = 10;
	var spinTimeTotal = 0;
	var spinAngleStart = 0;
	
	function spin(t) {
		if (t) {
            spinAngleStart = t * 10 + 10;
            spinTime = 0;
            spinTimeTotal = t * 10 + 4 * 1000;
            rotateWheel();
        }
        else {
            v = Math.random();
            spinAngleStart = v * 10 + 10;
            spinTime = 0;
            spinTimeTotal = v * 10 + 4 * 1000;
            rotateWheel();
            conn.send('spin%%C%%' + v);
            selfSpin = true;
        }
	}
    
    function rotateWheel() {
		spinTime += 30;
		if( spinTime >= spinTimeTotal ) {
			stopRotateWheel();
			return;
		}
		disabledSpin();
		var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
		startAngle += (spinAngle * Math.PI / 180);
		pieChart.setStartAngle( startAngle );
		var iIndex = getIndexSelected();
		pieChart.setSelected( iIndex );
		pieChart.draw();
		spinTimeout = setTimeout('rotateWheel()', 1);
	}
      
	function stopRotateWheel() {
		clearTimeout(spinTimeout);
		if ( sz_ActiveUser == sz_UserName) {
			enabledSelectionLetter();
		}
		getValueSelected();
		var canvas = document.getElementById("piechart");
		ctx = canvas.getContext("2d");
		ctx.save();
		ctx.restore();
	}

	function easeOut(t, b, c, d) {
		var ts = (t/=d)*t;
		var tc = ts*t;
		return b+c*(tc + -3*ts + 3*t);
	}
	
	// get position selected of arrow 
	function getIndexSelected()
	{
		var iDegrees = pieChart.getStartAngle() * 180 / Math.PI + 90;
		var iArcd = arc * 180 / Math.PI;
		var iIndex = Math.floor((360 - iDegrees % 360) / iArcd);
		return iIndex;
	}
	function getValueSelected()
	{
		var iValue = oOptionWheel.aValues[getIndexSelected()];
		// Store value into input[hidden]
		$('#selectedValue').val(iValue);
		// Demo alert
		// alert('So diem la: ' + $('#selectedValue').val());
		$("#response").text(iValue);
        if (selfSpin) {
            conn.send('score%%C%%' + iValue);
            selfSpin = false;
        }
        // enabled event click choice a cell
        if ( iValue == 'Buy a vowel' && sz_ActiveUser == sz_UserName ) {
        	enabledBuyVowel();
        }
     	// enabled event click choice a cell
        if ( iValue == 'Free Spin' && sz_ActiveUser == sz_UserName ) {
        	enabledSelectionLetter();
        }
		return iValue;
	}
	// disabled spin button
	function disabledSpin() {
		$('#btn-spin').unbind('click');
		$('#btn-spin').removeClass('btn-danger').addClass('');
	}
	// enabled spin button
	function enbabledSpin() {
		$('#btn-spin').addClass('btn-danger');
		$('#btn-spin').unbind('click').bind('click', function(){
			spin();
		});
	}
	// get Avatar of currently player
	function getAvatarPlayer()
	{
		$('#player-active').attr('src', $('#users .active img').attr('src'));
	}
	
    // ready
    var bReady;
	function ready()
	{
        conn.send('ready%%C%%');
        disabledReady();
        bReady = true;
	}
    
    // disabled ready button
	function disabledReady() {
		$('#btn-ready').unbind('click');
		$('#btn-ready').removeClass('btn-success').addClass('');
	}
	// enabled ready button
	function enbabledReady() {
		$('#btn-ready').addClass('btn-success');
		$('#btn-ready').unbind('click').bind('click', function(){
			ready();
		});
	}
    
    // ready
    var clock;
	function setTime(seconds)
	{
		disabledReady();
        if (seconds) {
            $('.time').text(seconds);
            clock = setInterval("countdown("+ $('.time').text() + ")", 1000);
        }
	}
    
    function countdown(val)
    {
        if (val > 0) {
            val--;
            if (val < 10) {
                val = "0" + val;
            }
            $('.time').text(val);
            clearInterval(clock);
            setTime($('.time').text());
            $('#sound_clock').get(0).play();
        } else {
            clearInterval(clock);
            $('#quiz-cat').text(category);
            
            bReady = false;
            if ( sz_UserName == sz_ActiveUser ) {
                enbabledSpin();
			}
        }
    }
    
    function generateLetters() {
        $(".cell").addClass("cell inactive");
        var a_Postions = letterMatrix.split(",");
        for (var i = 0; i < a_Postions.length; i++) {
            $("#cell-" + a_Postions[i]).removeClass("inactive");
            $("#cell-" + a_Postions[i]).addClass("active");
        }
    }
    
    function setUserValue(users) {
        var a_UserName = users.split(",");
        $("#player1").addClass("hide");
        $("#player2").addClass("hide");
        $("#player3").addClass("hide");
        for (var i = 0; i < a_UserName.length; i++) {
            $("#player" + (i + 1)).removeClass("hide");
			var a_User = a_UserName[i].split(";");
            $("#player-name-" + (i + 1)).text(a_User[0]);
            console.log(a_User);
			if(a_User[1] !='')
				$("#player-avatar-" + (i + 1)).attr('src','avatars/' + a_User[1]);
        }
    }
    
    function setScoreValue(users) {
        var a_User = users.split("%%S%%");
        
        for (var i = 0; i < a_User.length; i++) {
            var a_Info = a_User[i].split(",");
            var sUser = a_Info[0].split(';')[0];
            if ($("#player-name-" + (i + 1)).text() == sUser) {
                if (a_Info[1])
                    $("#player-score-" + (i + 1)).text(a_Info[1]);
                else
                    $("#player-score-" + (i + 1)).text(0);
            }
        }
    }
    
    function setUserTurn(username) {
        $("#player1").removeClass("active");
        $("#player2").removeClass("active");
        $("#player3").removeClass("active");
        var sz_User = username.split(';')[0];
        $("#response").text("This is " + sz_User + "'s turn!");
        for (var i = 0; i < 3; i++) {
            if ($("#player-name-" + (i + 1)).text() == sz_User) {
                $("#player" + (i + 1)).addClass("active");
                getAvatarPlayer();
                sz_ActiveUser = sz_User;
             	// Only enabled with user is active
             	
                if ( bReady == false ) {
                	if ( sz_UserName == sz_ActiveUser ) {
                        enbabledSpin();
        			}
				}
            }
        }
    }
    
    function setRoundValue(sz_data) {
        $("#response").text("Finish round, see result below plz!");
        var a_Elem = sz_data.split("%%S%%");
        var a_Info = a_Elem[1].split(",");
        $("#Round-player-" + a_Elem[0]).text(a_Info[0].split(';')[0]);
        $("#Round-score-" + a_Elem[0]).text(a_Info[1]);
    }

    function endgame()
	{
        enbabledReady();
		//TODO: Reset others
	}
    
    var turnclock;
    function setTurnTime(seconds)
    {
        if (seconds) {
            disabledSpin();
            if (parseInt(seconds) < 10) {
                seconds = "0" + parseInt(seconds);
            }
            $('.time').text(seconds);
            turnclock = setInterval("countdownturn("+ $('.time').text() + ")", 1000);
        }
    }
    
    function countdownturn(val)
    {
        //console.log(val);
        if (val > 0) {
            val--;
            if (val < 10) {
                val = "0" + val;
            }
            $('.time').text(val);
            clearInterval(turnclock);
            setTurnTime($('.time').text());
            $('#sound_clock').get(0).play();
        } else {
            clearInterval(turnclock);
            if ( sz_UserName == sz_ActiveUser ) {
                conn.send('turn%%C%%');
//                enbabledSpin();
            }
        }
    }
    
    var endroundclock;
    function setEndRoundTime(seconds)
    {
        if (seconds) {
            disabledSpin();
            $('.time').text(seconds);
            endroundclock = setInterval("countdownendround("+ $('.time').text() + ")", 1000);
        }
    }
    
    function countdownendround(val)
    {
        if (val > 0) {
            val--;
            if (val < 10) {
                val = "0" + val;
            }
            $('.time').text(val);
            clearInterval(endroundclock);
            setEndRoundTime($('.time').text());
            $('#sound_clock').get(0).play();
        } else {
            clearInterval(endroundclock);
            showLetterCorrected();
            if ( sz_UserName == sz_ActiveUser ) {
                conn.send('endround%%C%%');
                enbabledSpin();
            }
        }
    }
    
	$(document).ready(function(){
		getAvatarPlayer();
		disabledSelectionLetter();
		disabledBuyVowel();
		var pos = $('#footer').position();
		$('#main').height(pos.top - $('#footer').height());
	});
	
    $( document ).ready(function() {
        conn = new WebSocket('ws://localhost:9999');
        conn.onopen = function(e) {
            conn.send('user%%C%%' + userInfo);
            console.log("Connection established!");
        };
        conn.onmessage = function(e) {
            console.log('Response: ' + e.data);
            var a_msg = e.data.split("%%C%%");
            var sz_control = a_msg[0];
            var sz_value = a_msg[1];
            switch (sz_control) {
                case 'spin' :
                    spin(sz_value);
                    break;
                case 'score' :
                    setScoreValue(sz_value);
                    console.log('Response value: ' + sz_value);
                    break;
                case 'letter' :
                    letterReveal(sz_value);
                    disabledSelectionLetter();
                    console.log('Response value: ' + sz_value);
                    
                    break;
                case 'ready' :
                    setTime(sz_value);
                    console.log('Response value: ' + sz_value);
                    break;
                case 'cat' :
                    category = sz_value;
                    console.log('Response value: ' + sz_value);
                    break;
                case 'quiz' :
                    var a_Elements = sz_value.split("%%S%%");
                    quiz = a_Elements[0];
                    letterMatrix = a_Elements[1];
                    $('#quiz').text(quiz);
                    generateLetters();
                    console.log('Response value: ' + sz_value);
                    break;
                case 'user' :
                    setUserValue(sz_value);
                    console.log('Response value: ' + sz_value);
                    break;
                case 'turn' :
                    setUserTurn(sz_value);
                    console.log('Response value: ' + sz_value);
                    break;
                case 'vowel' :
                    vowelReveal(sz_value);
                    disabledSelectionLetter();
                    if ( sz_UserName == sz_ActiveUser ) {
                        enbabledSpin();
        			}
                    console.log('Response value: ' + sz_value);
                    break;
                case 'endround' :
                    setRoundValue(sz_value);
                    console.log('Response value: ' + sz_value);
                    break;
                case 'endgame' :
                    endgame();
                    console.log('Response value: ' + sz_value);
                    break;
                case 'error' :
                    console.log('Response value: ' + sz_value);
                    break;
            }
        };
    });
    /* cell*/
    function blink() {
    var blinks = document.getElementsByTagName('blink');
    for (var i = blinks.length - 1; i >= 0; i--) {
      var s = blinks[i];
      s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
    }
    window.setTimeout(blink, 1000);
  }
  
  function enabledSelectionLetter()
  {
  	$('.char-letter').each(function(){
      	$(this).unbind('click').bind('click', function(){
      		getLetter($(this).text());
  		});
      });
  	
   }
	function disabledSelectionLetter()
	{
		$('.char-letter').each(function(){
      	$(this).unbind('click');
      });
	}
	
  function getLetter(letter){
    conn.send('letter%%C%%' + letter);
    disabledSelectionLetter();
  }
  // Remove letter which is displayed on the cell
  function removeLetterCorrected( sz_LetterCorrected ) {
	  $('.char-letter').each(function(){
	      if ( sz_LetterCorrected == $(this).text() )
	    	  $(this).parent().hide();
	  });
  }
//show letter which is displayed on the cell
  function showLetterCorrected( sz_LetterCorrected ) {
	  $('.char-letter').each(function(){
		  $(this).parent().show();
	  });
  }
  
  function letterReveal(sz_Position){
    var a_Elements = sz_Position.split("%%S%%");
    if (a_Elements[1]) {
        var a_Pos = a_Elements[1].split(",");
        for (var i = 0; i < a_Pos.length; i++) {
            $("#cell-" + a_Pos[i]).removeClass("cell active");
            $("#cell-" + a_Pos[i]).addClass("cell");
            $("#cell-" + a_Pos[i]).text(a_Elements[0]);
        }
        if ( sz_UserName == sz_ActiveUser ) {
            enbabledSpin();
		}
        removeLetterCorrected( a_Elements[0] );
        $("#response").text("Have " + a_Pos.length + " " + a_Elements[0] + " letters!");
        if ($('#cells').find('.active').length < 1) {
            setEndRoundTime(10);
        }
    }
    else {
        $("#response").text("Do not have any " + a_Elements[0] + " letter!");
		setTurnTime(3);
    }
  }
  
//Enabled event buyvowel
  function enabledBuyVowel() {
	  disabledSelectionLetter();
      $('.letter-group').find('.active').each(function(){
          $(this).unbind('click').bind('click', function(){
              sCellId = $(this).attr('id');
              iPosition = sCellId.split('-')[1];
          	buyVowel( iPosition );
          });
      });
  }
  function disabledBuyVowel() {
  	$('.letter-group').find('.active').each(function(){
          $(this).unbind('click');
      });
	}
  
  function buyVowel(position){
    conn.send('vowel%%C%%' + position);
    disabledBuyVowel();
    //window.alert(position);
  }
  
  function vowelReveal(sz_Letter){
    var a_Elements = sz_Letter.split("%%S%%");
    if (a_Elements[1]) {
        $("#cell-" + a_Elements[0]).removeClass("cell active");
        $("#cell-" + a_Elements[0]).addClass("cell");
        $("#cell-" + a_Elements[0]).text(a_Elements[1]);
        $("#response").text("You got " + a_Elements[1] + " letter!");
        if ($('#cells').find('.active').length < 1) {
            setEndRoundTime(10);
        }
    }
    else {
        $("#response").text("Illigal position!");
    }
  }
  
  
  if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
  else if (window.addEventListener) window.addEventListener("load", blink, false);
  else if (window.attachEvent) window.attachEvent("onload", blink);
  else window.onload = blink;
    
</script>
</head>
    <body>
        <!--NAV BAR-->
        
        <?php for($i_Index = 0; $i_Index < 24; $i_Index ++): ?>
        <audio id="sound_wheel_<?php echo $i_Index;?>">
  			<source src="styles/sound_wheel.ogg" type="audio/ogg">
  			<source src="styles/sound_wheel.mp3" type="audio/mpeg">
		</audio>
        <?php endfor;?>
        <audio id="sound_clock">
  			<source src="styles/clock.ogg" type="audio/ogg">
  			<source src="styles/clock.wav" type="audio/wav">
		</audio>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner" id="site-header">
                <div class="container-fluid">
                    <!--LOGO-->
                    <a class="brand">GAME LOGO</a>
                    
                    <!--MAIN MENU-->
                    <div class="nav-collapse">
                        <!--Navigation-->
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                        </ul><!--End Navigation-->
                    
                        <!--User Info-->
                        <ul class="nav pull-right">
                            <li class="divider-vertical"></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><?php echo $_SESSION['user']->user_username?></b></a>
                            </li>
                            <li class="divider-vertical"></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                <li><a tabindex="-1" href="logout.php">Log Out</a></li>
                            </ul>
                            </li>
                        </ul><!--End User Info-->
                    </div><!--END MAIN MENU-->
                </div>
            </div>
        </nav> <!--END NAV BAR-->
        
        <!--MAIN-->
        <div class="container-fluid" id="main">
            <div class="row-fluid">
                <!--WHEEL-->
                <div class="span5" id="wheel">
                    <div class="wheel-wrapper">
                        <div class="wheel-arrow"></div>
                        <img id="player-active" src="styles/img/avatar/user-01.png" width="52" height="52" class="img-circle img-polaroid wheel-player-avt"/>
                        <canvas id="piechart" width="450" height="450">
                        </canvas>
                    </div>
                    <div class="wheel-shadow"></div>
                    <button id="btn-spin" class="btn btn-danger btn-spin" type="button">Spin</button>
                    <button id="btn-ready" class="btn btn-success btn-ready" type="button">Ready</button>
                    <input type="hidden" name="selectedValue" id="selectedValue" value=""/>
                </div><!--END WHEEL-->
                
                <!--MAIN PLAYER-->
                <div class="span7" id="main-player">
                    <div class="round-info">
                        <!--Cells-->
                        <section id="cells" class="text-center">
                            <ul class="letter-group">
                                <li class="space-cell"><a href="#">A</a></li>
                                <li class="inactive"></li>
                                <li id="cell-1" class="cell inactive">A</li>
                                <li id="cell-2" class="cell inactive">A</li>
                                <li id="cell-3" class="cell inactive">A</li>
                                <li id="cell-4" class="cell inactive">A</li>
                                <li id="cell-5" class="cell inactive">A</li>
                                <li id="cell-6" class="cell inactive">A</li>
                                <li id="cell-7" class="cell inactive">A</li>
                                <li id="cell-8" class="cell inactive">A</li>
                                <li id="cell-9" class="cell inactive">A</li>
                                <li id="cell-10" class="cell inactive">A</li>
                                <li id="cell-11" class="cell inactive">A</li>
                                <li id="cell-12" class="cell inactive">A</li>
                                <li class="divider"></li>
                                <li id="cell-14" class="cell inactive">A</li>
                                <li id="cell-15" class="cell inactive">A</li>
                                <li id="cell-16" class="cell inactive">A</li>
                                <li id="cell-17" class="cell inactive">A</li>
                                <li id="cell-18" class="cell inactive">A</li>
                                <li id="cell-19" class="cell inactive">A</li>
                                <li id="cell-20" class="cell inactive">A</li>
                                <li id="cell-21" class="cell inactive">A</li>
                                <li id="cell-22" class="cell inactive">A</li>
                                <li id="cell-23" class="cell inactive">A</li>
                                <li id="cell-24" class="cell inactive">A</li>
                                <li id="cell-25" class="cell inactive">A</li>
                                <li id="cell-26" class="cell inactive">A</li>
                                <li id="cell-27" class="cell inactive">A</li>
                                <li class="divider"></li>
                                <li id="cell-28" class="cell inactive">A</li>
                                <li id="cell-29" class="cell inactive">A</li>
                                <li id="cell-30" class="cell inactive">A</li>
                                <li id="cell-31" class="cell inactive">A</li>
                                <li id="cell-32" class="cell inactive">A</li>
                                <li id="cell-33" class="cell inactive">A</li>
                                <li id="cell-34" class="cell inactive">A</li>
                                <li id="cell-35" class="cell inactive">A</li>
                                <li id="cell-36" class="cell inactive">A</li>
                                <li id="cell-37" class="cell inactive">A</li>
                                <li id="cell-38" class="cell inactive">A</li>
                                <li id="cell-39" class="cell inactive">A</li>
                                <li id="cell-40" class="cell inactive">A</li>
                                <li id="cell-41" class="cell inactive">A</li>
                                <li class="divider"></li>
                                <li class="space-cell"></li>
                                <li id="cell-43" class="cell inactive">A</li>
                                <li id="cell-44" class="cell inactive">A</li>
                                <li id="cell-45" class="cell inactive">A</li>
                                <li id="cell-46" class="cell inactive">A</li>
                                <li id="cell-47" class="cell inactive">A</li>
                                <li id="cell-48" class="cell inactive">A</li>
                                <li id="cell-49" class="cell inactive">A</li>
                                <li id="cell-50" class="cell inactive">A</li>
                                <li id="cell-51" class="cell inactive">A</li>
                                <li id="cell-52" class="cell inactive">A</li>
                                <li id="cell-53" class="cell inactive">A</li>
                                <li id="cell-54" class="cell inactive">A</li>
                            </ul>
                        </section>
                    
                        <!--Characters-->
                        <section id="alphabet">
                            <!--<h4>Alphabet</h4>-->
                            <div class="pagination alphabet text-center">
                                <ul>
                                    <li class="letter"><a href="#">Letter</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">A</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">B</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">C</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">D</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">E</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">F</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">G</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">H</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">I</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">J</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">K</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">L</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">M</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">N</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">O</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">P</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">Q</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">R</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">S</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">T</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">U</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">V</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">W</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">X</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">Y</a></li>
                                    <li><a class="char-letter" href="javascript:void(0);">Z</a></li>
                                </ul>
                            </div>
                        
                            <!--<div style="margin: 0;" class="btn-toolbar">
                  <div class="btn-group">
                    <button class="btn">A</button>
                    <button class="btn">B</button>
                    <button class="btn">C</button>
                    <button class="btn">D</button>
                    <button class="btn">E</button>
                  </div>
                  <div class="btn-group">
                    <button class="btn">5</button>
                    <button class="btn">6</button>
                    <button class="btn">7</button>
                  </div>
                  <div class="btn-group">
                    <button class="btn">8</button>
                  </div>
                </div>-->
                        </section>
                        <!--Guide-->
                        <section id="guide">
                            <div class="row-fluid">
                                <div class="span2 text-center"><img src="styles/img/avatar/guide.png" width="64" height="64" class="img-circle img-polaroid"/></div>
                                <div class="span4">
                                        <div class="question">
                                            <h4 id="quiz-cat" class="media-heading">Topic</h4>
                                            <blockquote id="quiz">
                                                Question...?
                                            </blockquote>
                                        </div>
                                </div>
                                <div class="span4">
                                        <div class="question">
                                            <h4 class="media-heading">Response</h4>
                                            <blockquote id="response">
                                                Wait plz!
                                            </blockquote>
                                        </div>
                                </div>
                                <div class="span2">
                                    <h1 class="time" style="color:red">00</h1>
                                </div>
                            </div>
                        </section>
                    
                    </div>
                    
                    <!--Players-->
                    <section id="users">
                        <div class="row-fluid">
                            <ul class="thumbnails">
                                <li id="player1" class="span2 text-center player">
                                    <h5 id="player-name-1" class="name">Player 1</h5>
                                    <img id="player-avatar-1" src="styles/img/avatar/user-01.png" width="52" height="52" class="img-circle img-polaroid"/>
                                    <h4 id="player-score-1" class="point">0</h4>
                                </li>
                                <li id="player2" class="span2 text-center player">
                                    <h5 id="player-name-2" class="name">Player 2</h5>
                                    <img id="player-avatar-2" src="styles/img/avatar/user-02.png" width="52" height="52" class="img-circle img-polaroid"/>
                                    <h4 id="player-score-2" class="point">0</h4>
                                </li>
                                <li id="player3" class="span2 text-center player">
                                    <h5 id="player-name-3" class="name">Player 3</h5>
                                    <img id="player-avatar-3" src="styles/img/avatar/user-03.png" width="52" height="52" class="img-circle img-polaroid"/>
                                    <h4 id="player-score-3" class="point">0</h4>
                                </li>
                                <li class="span6 statistics">
                                        <table class="table table-striped table-condensed">
                                          <thead>
                                            <tr>
                                              <th>Round</th>
                                              <th>Winner</th>
                                              <th>Point</th>
                                            </tr>
                                          </thead>
                                          <tbody>
                                            <tr>
                                              <td>1</td>
                                              <td id="Round-player-1"></td>
                                              <td id="Round-score-1"></td>
                                            </tr>
                                            <tr>
                                              <td>2</td>
                                              <td id="Round-player-2"></td>
                                              <td id="Round-score-2"></td>
                                            </tr>
                                            <tr>
                                              <td>3</td>
                                              <td id="Round-player-3"></td>
                                              <td id="Round-score-3"></td>
                                            </tr>
                                          </tbody>
                                        </table>
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>
            </div>
        </div><!--MAIN-->
        
        <!--FOOTER-->
        <footer id="footer" class="navbar navbar-inverse navbar-fixed-bottom">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span10">Wheel of the Fortune - HTML5 Project</div>
                    <div class="span2 text-center copyright">Copyright &copy; Team 3</div>
                </div>
            </div>
        </footer><!--END FOOTER-->
    </body>
</html>
<?php
ob_flush();
?>